import React, { useState } from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import ProField from '@ant-design/pro-field';
import { DeleteOutlined, SearchOutlined,PaperClipOutlined ,PlusOutlined,EditOutlined } from '@ant-design/icons';
import { ProFormRadio } from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import {Row, DatePicker, Button ,Col,Input } from 'antd';
import styles from '../style.less'
const { Search } = Input;
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

type DataSourceType = {
  id: React.Key;
  title?: string;
  decs?: string;
  state?: string;
  created_at?: string;
  update_at?: string;
  children?: DataSourceType[];
};
const onSearch = value => console.log(value);

const defaultData: DataSourceType[] = [
  {
    id: 624748504,
    name:'项目名称',
    title: '课件标题',
    decs: '	培训主题',
    user:'张三',
    readTime:10,
    state: 'open',
    created_at: '2020-05-26T09:42:56Z',
    update_at: '2020-05-26T09:42:56Z',
  }
];

export default () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<DataSourceType[]>([]);


  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '项目名称',
      dataIndex: 'name',
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: rowIndex > 2 ? [{ required: true, message: '此项为必填项' }] : [],
        };
      }
    },
    {
      title: '培训主题',
      dataIndex: 'decs',
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: rowIndex > 2 ? [{ required: true, message: '此项为必填项' }] : [],
        };
      }
    },
      {
      title: '课件标题',
      dataIndex: 'title',
    },
    {
      title: '培训人员姓名',
      dataIndex: 'user',
    },
    {
      title: '阅读时间(分钟)',
      dataIndex: 'readTime',
    },
    {
      title: '培训日期设定',
      dataIndex: 'created_at',
      valueType: 'date',
    },
    {
      title: '完成状态',
      key: 'state',
      dataIndex: 'state',
      valueType: 'select',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: {
          text: '未解决',
          status: 'Error',
        },
        closed: {
          text: '已解决',
          status: 'Success',
        },
      },
    },
   
   
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={() => {
            setDataSource(dataSource.filter((item) => item.id !== record.id));
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  return (
    <>
 
    

    <Row  className={styles.operationrow} > 
        <Col  className={[styles.item, styles.right].join(' ')}>
           <div style={{    backgroundColor: '#40a9ff',borderRadius: '3px', width:270}}>
                <Input bordered={false} style={{  width:270}}  placeholder="培训主题" className={styles.inputBg} suffix={ <SearchOutlined onClick={onSearch}  style={{    fontSize: '20px'}}/> }
                />
              </div>
          <Button type="primary" icon={<SearchOutlined />}  style={{marginRight:'15px'}}  className={styles.searchBtnBg}>搜索</Button>
        </Col>
        <Col  className={[styles.item, styles.left].join(' ')}>
          <Button type="primary" icon={<PlusOutlined />}  >新增</Button>
          <Button type="primary" icon={<EditOutlined />}  >编辑</Button>
          <Button type="primary" icon={<DeleteOutlined />}  className={styles.resetBtnBg}>删除</Button>
        </Col>
       
      </Row>

      <EditableProTable<DataSourceType>
        rowKey="id"
        maxLength={5}
        recordCreatorProps={ false }
       
        columns={columns}
        request={async () => ({
          data: defaultData,
          total: 3,
          success: true,
        })}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async (rowKey, data, row) => {
            console.log(rowKey, data, row);
            await waitTime(2000);
          },
          onChange: setEditableRowKeys,
        }}
      />
     
    </>
  );
};